<template>
  <v-container>
    <!--    顶部tab栏-->
    <v-toolbar
        color="white"
        flat
    >
      <template v-slot:extension>
        <v-tabs v-model="tab" slider-size="1" class="px-auto">
          <v-spacer></v-spacer>
          <v-tabs-slider color="primary"></v-tabs-slider>

          <v-tab key="0">
            找回密码
          </v-tab>
          <v-spacer></v-spacer>
        </v-tabs>
      </template>
    </v-toolbar>
    <!--tab item 1-->
    <v-tabs-items v-model="tab">
      <v-tab-item key="0">
        <v-card flat class="mt-5">
          <!--选择手机或者邮箱登录-->
          <v-card-subtitle class="py-0">
            <v-icon>mdi-cellphone</v-icon>
          </v-card-subtitle>
          <v-card-text class="pb-1">
            <v-text-field class="py-0"
                          ref="phone"
                          placeholder="请输入11位手机号"
                          :rules="[rules.required,rules.phone]"
                          v-model="forgetData.phone"
                          prefix="+86"
                          @blur="forgetForm.phoneOK=rules.phone(forgetData.phone)===true"
            ></v-text-field>
          </v-card-text>


          <v-card-subtitle class="py-0">
            <v-icon>mdi-shield-lock-outline</v-icon>
          </v-card-subtitle>
          <v-card-text class="pb-1">
            <v-text-field class="py-0"
                          ref="verifyCode"
                          placeholder="请输入验证码"
                          v-model="forgetData.verifyCode"
                          :rules="[rules.required,rules.verifyCode]"
            >
              <template v-slot:append>
                <v-chip small disabled v-if="fetchCode">
                  <v-progress-circular
                      size="15"
                      width="2"
                      indeterminate
                  ></v-progress-circular>
                </v-chip>
                <v-chip small :disabled="!forgetForm.phoneOK" @click="doGetVerifyCode" v-else>
                  获取验证码
                </v-chip>
              </template>
            </v-text-field>
          </v-card-text>


          <v-card-subtitle class="py-0">
            <v-icon>mdi-lock-outline</v-icon>
          </v-card-subtitle>
          <v-card-text class="pb-1">
            <v-text-field class="py-0"
                          ref="password"
                          placeholder="请输入密码"
                          v-model="forgetData.password"
                          :rules="[rules.required,rules.password]"
                          hint="长度6-12位，至少包含字母和数字和符号中两种"
                          :type="forgetForm.confirmEye0?'input':'password'"
            >
              <template v-slot:append>
                <v-btn icon>
                  <v-icon size="30" v-if="forgetForm.confirmEye0" @click="forgetForm.confirmEye0=false">
                    mdi-eye-outline
                  </v-icon>
                  <v-icon size="30" v-else @click="forgetForm.confirmEye0=true">mdi-eye-off-outline</v-icon>
                </v-btn>
              </template>
            </v-text-field>
          </v-card-text>

          <v-card-subtitle class="py-0">
            <v-icon>mdi-lock-outline</v-icon>
          </v-card-subtitle>
          <v-card-text class="pb-1">
            <v-text-field class="py-0"
                          ref="confirmPassword"
                          placeholder="请再次输入密码"
                          :rules="[rules.required,rules.password]"
                          v-model="forgetData.confirmPassword"
                          hint="长度6-12位，至少包含字母和数字和符号中两种"
                          :type="forgetForm.confirmEye1?'input':'password'"
                          @blur="forgetForm.errMsg=forgetData.password!==forgetData.confirmPassword?'两次输入的密码不一样哦':''"
                          :error-messages="forgetForm.errMsg"
            >
              <template v-slot:append>
                <v-btn icon>
                  <v-icon size="30" v-if="forgetForm.confirmEye1" @click="forgetForm.confirmEye1=false">
                    mdi-eye-outline
                  </v-icon>
                  <v-icon size="30" v-else @click="forgetForm.confirmEye1=true">mdi-eye-off-outline</v-icon>
                </v-btn>
              </template>
            </v-text-field>
          </v-card-text>

        </v-card>
        <v-row align="center" justify="center" class=" ">
          <v-col cols="7" class="pb-0">
            <v-btn color="primary" rounded x-large width="100%" v-if="forgetForm.posting">
              <v-progress-circular width="5" size="30" color="white" indeterminate></v-progress-circular>
            </v-btn>
            <v-btn color="primary" rounded x-large width="100%" @click="doResetPassword" v-else>修改</v-btn>
          </v-col>

        </v-row>
        <v-row align="center" justify="center" class="mb-5">
          <v-col cols="7">
            <v-btn color="secondary" rounded x-large width="100%" @click="$router.back()">取消</v-btn>
          </v-col>

        </v-row>
      </v-tab-item>

    </v-tabs-items>
  </v-container>
</template>

<script>
import {rules} from "../util/util";

export default {
  name: "Forget",
  data: () => ({
    tab: '',
    forgetForm: {
      phoneOK: false,
      confirmEye0: false,
      confirmEye1: false,
      errMsg:'',
      posting:false
    },
    forgetData: {
      phone: '',
      verifyCode: '',
      password: '',
      confirmPassword: '',
    },
    rules: rules,
    fetchCode:false

  }),
  methods: {
    doGetVerifyCode() {
      this.fetchCode = true
      let data = {
        phone: this.forgetData.phone
      }
      this.$http.post("user/getVerifyCode", data, {}).then(res => {
        this.$emit('toast', `【妆典】验证码是 ${res.data}，请妥善保管不要泄露。`, 5000)
        this.forgetData.verifyCode =res.data
        this.fetchCode = false
      }).catch(res => {
        this.fetchCode = false
        this.$emit('toast', res.msg)
      })
      // this.forgetData.verifyCode =''
    },
    doResetPassword() {
      // 遍历forms对象中的键，拼接去取refs中对象然后调用validate验证
      let keys = Object.keys(this.forgetData)
      let ok = false
      for (let key of keys) {
        if (this.$refs[key]) {
          ok = this.$refs[key].validate(true)
          if (!ok) return
        }
      }

      this.forgetForm.posting = true
      // 拼装data
      let data = this.forgetData
      this.$http.post("user/forget", data, {}).then(res => {
        this.forgetForm.posting = false
        this.$emit('toast', '修改密码成功')
        this.$router.replace("/login")
      }).catch(res => {
        this.forgetForm.posting = false
        this.$emit('toast', res.msg)
      })
    }
  }
}
</script>

<style scoped>

</style>
